<template>
  <div class="txt-container">
    <pre>{{ txtContent }}</pre>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  fileUrl: { type: String, default: '' }
})

const txtContent = ref()

onMounted(() => {
  fetch(props.fileUrl)
    .then(res => res.text())
    .then(text => {
      txtContent.value = text
    })
})
</script>

<style lang="less" scoped>
.txt-container {
  box-sizing: border-box;
  width: 1150px;
  height: 880px;
  padding: 20px;
  overflow: auto;
  background-color: #fff;

  pre {
    margin: 0;
    font-size: 20px;
    white-space: pre-wrap;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #dbdbdb;
    border-radius: 10px; // 滑块圆角
  }
}
</style>
